<template>
  <div class="k-empty" :style="{ height }">
    <div :class="['k-empty-main', direction === 'row' && 'row']">
      <slot></slot>
      <div class="m-font-12 m-color-text-5 k-empty-main__desc">{{ description }}</div>
    </div>
    <slot name="footer" />
  </div>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
defineComponent({ name: 'KEmpty' });
interface Props {
  height?: string;
  direction?: 'row' | 'column';
  description?: string;
}
withDefaults(defineProps<Props>(), {
  height: 'auto',
  direction: 'column',
  description: '暂无数据'
});
</script>

<style lang="scss" scoped>
.k-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  &-main {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 118px;
      height: 118px;
    }

    &__desc {
      margin-top: 8px;
    }

    &.row {
      flex-direction: row;

      .k-empty-main__desc {
        margin: 0 0 0 4px;
      }
    }
  }
}
</style>
